 <template>
 <!--首页列表 begin-->
 <div style="padding:10px 20px;" class="overflowY">
   <div style="width: 100%;height: 300px;background-color: #F2F2F2;padding-top: 12px;">
     <el-row :gutter="20">
       <el-col :span="12" :offset="6">
         <div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;">
          <base-card title="我的代办" more="更多" :more-handler="moreHandler">
           <ul class="todoList-wrapper">
             <li class="item" :class="index===activeIndex?'active':''" v-for="(d ,index) in listData" @click="activeIndex=index">
               <el-row>
                 <el-col :span="2" class="col"><span class="index">{{index+1}}</span></el-col>
                 <el-col :span="12" class="col" style="text-align: left"><span class="title">{{d.title}}</span></el-col>
                 <el-col :span="10" class="col" style="text-align: right;padding-right: 15px;"><span class="time">{{d.time}}</span></el-col>
               </el-row>
             </li>
           </ul>
         </base-card>
         </div>
       </el-col>
     </el-row>
   </div>
   <base-card title="说明">
     <code>
       <span style="width: 100%;display: inline-block;">最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左</span>
     </code>
   </base-card>
   <base-card title="HTML">
     <div v-html="sizeAll">{{sizeAll}}</div>
   </base-card>
   <base-card title="JS">
     <pre><code>import BaseCard from '@/components/BaseCard/BaseCard' // 卡片外边框<br>export default {<br>  data() {<br>    return {<br>      activeIndex: null<br>    }<br>  },<br>  components: {<br>    BaseCard<br>  },<br>  props: {<br>    listData: {<br>      type: Array,<br>      default: function() {<br>        return [<br>          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },<br>          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },<br>          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },<br>          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },<br>          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },<br>          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' }]<br>      }<br>    }<br>  }<br>}</code></pre>

   </base-card>
   <base-card title="CSS">
     <pre><code>&lt;style scoped lang="scss"&gt;<br>   .todoList-wrapper{<br>     width: 100%;<br>     .item{<br>       line-height: 38px;<br>       position: relative;<br>       cursor: pointer;<br>       span:{<br>         font-size:13px;<br>         color:#333333FF;<br>       }<br>       .time{<br>         padding-right: 3px ;<br>       }<br>       .col{<br>         text-align: center;<br><br>       }<br>     }<br>     .item.active{<br>       background: rgba(236,241,255,1);<br>     }<br>     .item:hover{<br>       transition: all .5s;<br>       background: rgba(236,241,255,1);<br>     }<br>   }<br> &lt;/style&gt;</code></pre>

   </base-card>
 </div>
 <!--首页列表 end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard' // 卡片外边框
export default {
  data() {
    return {
      sizeAll: '<pre><code>    &lt;div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;"&gt;<br>        &lt;base-card title="我的代办" more="更多" :more-handler="moreHandler"&gt;<br>           &lt;ul class="todoList-wrapper"&gt;<br>             &lt;li class="item" :class="index===activeIndex?\'active\':\'\'" v-for="(d ,index) in listData" @click="activeIndex=index"&gt;<br>               &lt;el-row&gt;<br>                 &lt;el-col :span="2" class="col"&gt;&lt;span class="index"&gt;{{index+1}}&lt;/span&gt;&lt;/el-col&gt;<br>                 &lt;el-col :span="12" class="col" style="text-align: left"&gt;&lt;span class="title"&gt;{{d.title}}&lt;/span&gt;&lt;/el-col&gt;<br>                 &lt;el-col :span="10" class="col" style="text-align: right;padding-right: 15px;"&gt;&lt;span class="time"&gt;{{d.time}}&lt;/span&gt;&lt;/el-col&gt;<br>               &lt;/el-row&gt;<br>             &lt;/li&gt;<br>           &lt;/ul&gt;<br>        &lt;/base-card&gt;<br>     &lt;/div&gt;</code></pre>',
      activeIndex: null,
      moreHandler() {
        alert('更多')
      }
    }
  },
  components: {
    BaseCard
  },
  props: {
    listData: {
      type: Array,
      default: function() {
        return [
          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },
          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },
          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },
          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },
          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' },
          { title: '设备油耗(未提交)', time: '2019/02/13 16:46' }]
      }
    }
  }
}
</script>
 <style scoped lang="scss">
   .todoList-wrapper{
     width: 100%;
     .item{
       line-height: 38px;
       position: relative;
       cursor: pointer;
       span:{
         font-size:13px;
         color:#333333FF;
       }
       .time{
         padding-right: 3px ;
       }
       .col{
         text-align: center;

       }
     }
     .item.active{
       background: rgba(236,241,255,1);
     }
     .item:hover{
       transition: all .5s;
       background: rgba(236,241,255,1);
     }
   }
 </style>

